<template>
  <div class="xd-device">
      <div class="list">
        <Card>
          <p slot="title">
            <Icon type="md-list" />
            设备列表
          </p>
          <Form ref="formInline" :model="formSearch"  inline>
              <FormItem prop="user">
                  <Input type="text" v-model="formSearch.name" placeholder="请输入医院名称"></Input>
              </FormItem>
              <FormItem>
                  <Button type="primary" @click="handleSeacrh()">查询</Button>
              </FormItem>
          </Form>
          <Table highlight-row stripe :columns="columns" :data="data" ></Table>
          <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
              <Page :total="page.total" :page-size="page.pageSize" :current="1" @on-change="changePage" show-total></Page>
            </div>
          </div>
        </Card>
      </div>
    </Card>
  </div>
</template>

<script>
import API from "./api";
import ValidatorRule from "@/filters/validator-rule";
import { formatNetTime } from "@/libs/tools";
import i18n from "./locale";
import mixinTag from "@/mixin/tag-mixin";

export default {
  name: "xd-device",
  components: {},
  mixins: [mixinTag],
  data() {
    return {
      i18n: i18n,
      page: {
        total: 0,
        pageSize: 20
      },
      formSearch: {
        name: "",
        pageNum: 1,
        pageSize: 20
      },
      columns: [
        {
          title: "序号",
          key: "id"
        },
        {
          title: "名称",
          key: "depaname"
        },
        {
          title: "类型",
          key: "lx"
        },
        {
          title: "设备ID",
          key: "deviceid",
          ellipsis: true,
          tooltip: true
        },
        {
          title: "备注",
          key: "remark",
          ellipsis: true,
          tooltip: true
        },
        {
          title: "注册时间",
          key: "regtime",
          ellipsis: true,
          tooltip: true,
          render: (h, params) => {
            return h("div", this.formatTime(params.row.regtime));
          }
        },
        {
          title: "操作时间",
          key: "lastoperatetime",
          ellipsis: true,
          tooltip: true,
          render: (h, params) => {
            return h("div", this.formatTime(params.row.lastoperatetime));
          }
        },
        {
          title: "授权",
          key: "authorized",
          width: 100,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h("i-switch", {
                props: {
                  type: "primary",
                  value: params.row.authorized === "yes"
                },
                on: {
                  "on-change": value => {
                    this.switch(params.row.id, value); //params.index是拿到table的行序列，可以取到对应的表格值
                  }
                }
              })
            ]);
          }
        }
      ],
      data: []
    };
  },

  mounted() {
    this.resetInit();
  },

  methods: {
    resetInit() {
      this.handleSeacrh();
    },

    formatTime: function(timeStr1) {
      return formatNetTime(timeStr1);
    },

    handleSeacrh() {
      let obj = this.formSearch;
      obj.pageNum = 1;
      this.formSearch = obj;
      this.getList(obj);
    },

    changePage() {
      let obj = this.formSearch,
        maxPageNum = Math.ceil(obj.page.total / obj.page.pageSize);
      if (obj.pageNum + 1 <= maxPageNum) {
        obj.pageNum = maxPageNum;
      }
      this.formSearch = obj;
      this.getList(obj);
    },

    getList(obj) {
      API.getList(obj)
        .then(res => {
          let data = res.data;
          this.page.total = data.total;
          this.page.pageSize = data.pageSize;
          this.data = data.list;
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    },

    switch(id, value) {
      let obj = {
        id: id,
        status: value ? "yes" : "no"
      };
      API.changeStatus(obj)
        .then(res => {
          this.$Message.success({ content: "操作成功！" });
        })
        .catch(err => {
          this.$Message.error("请求异常！");
        });
    }
  }
};
</script>
<style lang="less" >
@import "./xd-device.less";
</style>
